<template>
    <div class="dropdown">
        <button class="dropbtn">下拉菜单</button>
        <div class="dropdown-content">
            <a href="#">菜鸟教程 3</a>
            <a href="#">菜鸟教程 3</a>
            <a href="#">菜鸟教程 3</a>
            <a href="#">菜鸟教程 3</a>
        </div>
    </div>
</template>

<script>
    export default {
        name: "index.vue"
    }
</script>

<style>

    .dropdown{
        position: relative;
        display: inline-block;
    }

    .dropbtn {
        background-color: #4CAF50;
        color: white;
        padding: 25px;
        font-size: 16px;
        border: none;
        cursor: pointer;
    }

    .dropbtn:hover  {
        background-color: rgba(62, 255, 85, 0.4);
    }

        .dropdown:hover .dropdown-content {
        display: block;
    }



    .dropdown-content {
        display: none;
        min-width: 60px;
        padding: 12px 16px;
        background-color: #f9f9f9;
       // box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    }

    .dropdown-content a {
        padding: 12px 16px;
    }

    .dropdown-content a:hover {
        background-color: #f1f1f1
    }
</style>